<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能:1.适用于表格
			 2.行内元素与行内块元素对齐方式
			 理解: 文本和图片对齐方式【垂直居中】
			  元素种类 :
			  行内元素:典型行内元素 span  a  文本
			  特点:在一行内显示、不可设置宽高
			  块级元素: 典型块元素  div  p
			  特点:独占一行、可设宽高
			  行内块元素:典型行内块元素  img
			  特点；可设宽高、在一行内显示
			  页面组成：元素之间嵌套生成
			  三种元素相互嵌套  √  嵌套根据元素特点页面混乱
			  嵌套条件1：在一行内显示【效果】
			           块套行    √    推荐
					   行套行    √
					   行套块    √    增加条件，添加宽高,造成页面混乱  ×
					   块套块    √
			   嵌套条件2：独占一行【效果】
			   块套行    √    推荐
			   行套行    √
			   行套块    √    增加条件，添加宽高,造成页面混乱  ×
			   块套块    √
		 -->
	</head>
	<style>
		/* 抓每个img
		 派生(后代)选择器:
		 特点:抓取父元素中所有(后代)子元素【元素嵌套特点】
		 伪类选择器:
		 特点:在选择器后，过滤符合"特定条件"的某个元素
		 nth-child:选中父元素中第N个
		 符合条件:  p中包含4个img
		 id抓取父元素:空间大
		 class抓取父元素中某个子元素：微调
		 */
	p img:nth-child(1){
		border: 3px solid red;
	}   
	p img:nth-child(2){
		border: 10px solid greenyellow;
	} 
	/* 标准抓取每个img方案 */
	p img .baseline{
		vertical-align: baseline;
	}
	p img .top{
		vertical-align: top;
	}
	p img .middle{
		vertical-align: middle;
		/* vertical-align与text-align区别
		 区别1：属性值不同
		 2.vertical-align操作文本和图片垂直
		 textt-align操作文本左右和居中以及两边对齐
		 
		 
		 */
	}
	p img .bottom{
		vertical-align: bottom;
	}
	</style>
	
	<body>
		<h1>垂直方向属性使用{针对元素种类}</h1>
		<p>不是老弟你有啥实力我直接摸住< img class="baseline" src="img/575acfc538cceda1e0a0db68065394d3.gif" alt=/ width="250px"height="250px">在对齐？   肺雾贝利亚< img src="img/59cb1675e0620ecbe976e4f84babbe45.jpg"width="200px"height="180px"/>基线对齐</p >
		<p>不是老弟你有啥实力我直接摸住< img class="top" src="img/575acfc538cceda1e0a0db68065394d3.gif" alt=/ width="250px"height="250px">别对齐了   垃圾贝利亚< img src="img/59cb1675e0620ecbe976e4f84babbe45.jpg"width="200px"height="180px"/>顶线对齐</p >
		<p>不是老弟你有啥实力我直接摸住< img class="middle" src="img/575acfc538cceda1e0a0db68065394d3.gif" alt=/ width="250px"height="250px">敢对齐     彩笔贝利亚< img src="img/59cb1675e0620ecbe976e4f84babbe45.jpg"width="200px"height="180px"/>中线对齐</p >
		<p>不是老弟你有啥实力我直接摸住<img class="bottom" src="img/575acfc538cceda1e0a0db68065394d3.gif" alt=/ width="250px"height="250px">对齐吧     战神贝利亚< img src="img/59cb1675e0620ecbe976e4f84babbe45.jpg"width="200px"height="180px"/>底线对齐</p >
		
		
		<!-- 垂直方向4个属性值
		 不改变下找到并加上对齐
		 -->
		
		
	</body>
</html>